<template>
    <div>

        <el-card>

            <el-row>
                <el-page-header @back="goBack" content="订单详情">
                </el-page-header>
            </el-row>

            <el-divider></el-divider>
            <el-row style="margin-top: 20px">
                <el-col :span="18">
                    <el-tag size="medium" type="danger" v-if="this.orders.status===0">已取消
                    </el-tag>
                    <el-tag size="medium" type="success" v-if="this.orders.status===1">未付款
                    </el-tag>
                    <el-tag size="medium" v-if="this.orders.status===2">已付款</el-tag>
                </el-col>

                <el-col :span="6">
                    <span>操作时间：{{ this.orders.createTime }}</span>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
                <el-col :span="20" style="font-size: 13px">订单号: {{
                    this.orders.number
                    }}
                </el-col>
                <!--                <el-col :span="4" v-if="this.this.orders.status === 4">
                                    <el-button type="primary" @click="confirmReceipt">确认收货</el-button>
                                </el-col>
                                <el-col :span="4" v-if="this.order.status === 6">
                                    <el-tag size="medium" effect="dark">已收货</el-tag>
                                </el-col>-->
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <div>
                    <span style="font-size: 18px">收货人信息</span>
                </div>
                <div style="margin: 10px">
                    <span>收货人： {{ this.account.name }}</span>
                </div>
                <div style="margin: 10px">
                    <span>联系方式： {{ this.account.phone }}</span>
                </div>
                <div style="margin: 10px">
                    <span>收货地址： {{ this.account.address }}</span>
                </div>
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <div>
                    <span style="font-size: 18px">付款信息</span>
                </div>
                <div style="margin: 10px">
                    <span>支付方式：在线支付</span>
                </div>
                <div style="margin: 10px">
                    <span>支付状态：
                        <el-tag v-if="this.orders.payStatus === 0" type="danger">未支付</el-tag>
                        <el-tag v-if="this.orders.payStatus === 1" type="success">已支付</el-tag>
                    </span>
                </div>
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <div>
                    <span style="font-size: 18px">配送方式</span>
                </div>
                <div style="margin: 10px">
                    <span>配送方式：物流</span>
                </div>
                <!--                <div style="margin: 10px">-->
                <!--                    <span>配送状态：-->
                <!--                        <el-tag v-if="this.order.status < 4" type="danger">未发货</el-tag>-->
                <!--                        <el-tag v-if="this.order.status >= 4" type="danger">已发货</el-tag>-->
                <!--                    </span>-->
                <!--                </div>-->
                <!--                <div style="margin: 10px"><span>发货地址：{{ this.order.senderAddress }}</span></div>-->
            </el-row>

            <el-divider></el-divider>

            <template>
                <el-table
                        height="380"
                        :header-cell-style="{fontSize: '14px','text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        :data="this.ordersProductList"
                        stripe
                        style="width: 100%">
                    <el-table-column width="85" label="序号" type="index" align="center"></el-table-column>

                    <el-table-column label="图片" width="150px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="80" fit="fill" :src="scope.row.product.image"></el-avatar>
                        </template>
                    </el-table-column>

                    <el-table-column prop="product.name" label="商品名称"
                                     show-overflow-tooltip></el-table-column>
                    <el-table-column prop="product.detail" label="商品介绍"
                                     show-overflow-tooltip></el-table-column>
                    <el-table-column prop="product.price" label="单价(元)"
                                     show-overflow-tooltip></el-table-column>
                    <el-table-column label="收货">
                        <template slot-scope="scope">
                            <el-button type="primary" v-if="scope.row.status === 2"
                                       @click="confirmReceipt(scope.row.id)">
                                确认收货
                            </el-button>
                            <el-tag v-if="scope.row.status === 1" type="success">
                                待发货
                            </el-tag>
                            <el-tag v-if="scope.row.status === 4" type="primary">
                                已收货
                            </el-tag>
                            <el-tag v-if="scope.row.orders.status === 1" type="info">
                                暂无操作
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </template>


        </el-card>

    </div>
</template>
<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "OrderInfo",
    data() {
        return {
            account: {},
            userId: '',
            orderId: '',
            orders: {},
            ordersProduct: {},
            ordersProductList: [],

            statuss: [{
                value: 0,
                label: '已取消'
            }, {
                value: 1,
                label: '未付款'
            }, {
                value: 2,
                label: '已付款'
            }, {
                value: 3,
                label: '待发货'
            }, {
                value: 4,
                label: '已发货'
            }, {
                value: 5,
                label: '待签收'
            }, {
                value: 6,
                label: '已签收'
            }, {
                value: 7,
                label: '未评价'
            }, {
                value: 8,
                label: '已评价'
            }],
            payStatuss: [{             // 存储支付状态
                value: 0,
                label: '未支付'
            }, {
                value: 1,
                label: '已支付'
            }],

        }
    },

    mounted() {
        // 获取用户ID
        this.account = JSON.parse(localStorage.getItem('account'))
        this.userId = this.account.id
        // 获取订单ID
        this.orderId = this.$route.query.id
        // 如果订单ID和用户ID不存在，则返回我的订单
        if (this.userId === '' || this.orderId === '' || this.userId === undefined || this.orderId === undefined || this.userId === null || this.orderId === null) {
            this.$router.push('/myOrders')
        }
        // 获取订单信息
        this.loadOrderByAndOrderId()

    },
    methods: {

        loadOrderByAndOrderId() {
            this.$request.post('/ordersProduct/loadByOrderId?orderId=' + this.orderId).then(res => {
                if (res.code === '200') {
                    this.ordersProductList = res.data
                    this.orders = res.data[0].orders
                    console.log(this.ordersProductList)
                } else {
                    this.$message
                        .error(res.msg)
                }
            })
        },

        goBack() {
            this.$router.push('/myOrders')
        },


        confirmReceipt(id) {
            console.log(id)
            this.$request.post('/ordersProduct/confirmReceipt?id=' + id).then(res => {
                if (res.code === '200') {
                    this.$message
                        .success(res.msg)
                    this.loadOrderByAndOrderId()
                } else {

                }
            })
        },


    }
})
</script>


<style scoped>

</style>